<!--店铺管理页 StoreView.vue-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">信息管理</span>
    <el-button type="primary" style="float:right;margin-top:13px;" @click="beforeAddActivity">+ 新建活动</el-button>
  </div>
  <!-- 分类查询条件卡片 -->
  <el-card style="margin:20px;height: 120px;">
    <el-form :inline="true">
      <el-form-item label="活动标题" style="width:320px;">
        <el-input placeholder="请输入活动标题"
                  v-model="searchForm.activityName" ></el-input>
      </el-form-item>
      <el-form-item label="活动类型" style="width:320px;">
        <el-select placeholder="请选择活动状态" v-model="searchForm.type" >
          <el-option label="全部" value="0"/>
          <el-option label="赠领" value="1"/>
          <el-option label="拼团" value="2"/>
          <el-option label="抽奖" value="3"/>
          <el-option label="砍一刀" value="4"/>
        </el-select>
      </el-form-item>
      <el-form-item label="活动渠道" style="width:320px;">
        <el-select placeholder="请选择活动渠道" v-model="searchForm.channelType" >
          <el-option label="全部" value="0"/>
          <el-option label="APP" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item label="活动状态" style="width:320px;">
        <el-select placeholder="请选择活动状态" v-model="searchForm.status">
          <el-option label="全部" value="0"/>
          <el-option label="未开始" value="1"/>
          <el-option label="进行中" value="2"/>
          <el-option label="已结束" value="3"/>
        </el-select>
      </el-form-item>
      <el-form>
        <el-form-item label="营销方式" style="width:320px;">
          <el-select placeholder="请选择营销方式" v-model="searchForm.deliveryChannel">
            <el-option label="全部" value="0"/>
            <el-option label="内容推送" value="1"/>
            <el-option label="消息推送" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" style="width:320px;">
          <el-date-picker
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              v-model="times"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="loadActivity">查询</el-button>
        </el-form-item>
      </el-form>
    </el-form>
  </el-card>
  <!-- 店铺列表表格数据 -->
  <el-card style="margin:20px;">
    <h3>店铺列表</h3>
    <el-table stripe :data="tableData">
      <el-table-column label="编号" prop="id" type="index" align="center" width="100"></el-table-column>
      <el-table-column label="活动标题" prop="activityName" align="center"></el-table-column>
      <el-table-column label="活动目标" prop="activityTarget" align="center"></el-table-column>
      <el-table-column label="活动类型" prop="activityType" align="center"></el-table-column>
      <el-table-column label="活动奖励" prop="rewardType" align="center"></el-table-column>
      <el-table-column label="店铺" prop="shopIds" align="center"></el-table-column>
      <el-table-column label="渠道" prop="channelType" align="center"></el-table-column>
      <el-table-column label="营销方式" prop="marketingType" align="center"></el-table-column>
      <el-table-column label="活动时间" prop="startDate" align="center"></el-table-column>
      <el-table-column label="活动状态" align="center">
        <template #default="scope">
          <el-switch inactive-value="0" active-value="1" v-model="scope.row.status"
                     @change="changeStatus(scope.row.id,scope.row.status)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button type="primary" link @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="pagination">
        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20]"
            v-model:current-page="currentPage"
            v-model:page-size="currentSize"
            v-model:total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </template>
  </el-card>
  <!-- 新建活动外层弹窗-->
  <el-dialog title="选择活动" v-model="addActivityDialogVisible" width="700px">
    <!-- 活动类型卡片区域 -->
    <div class="activity-cards">
      <div
          v-for="(item, index) in activityTypes"
          :key="index"
          class="activity-card"
          :class="{ active: selectedType === item.type }"
          @click="handleSelect(item.type)"
      >
        <component :is="item.icon" class="activity-icon" />
        <div class="activity-text">{{ item.text }}</div>
      </div>
    </div>
    <!-- 新建活动按钮 -->
    <div class="create-btn-container">
      <el-button @click="addActivityDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleCreateActivity">新建活动</el-button>
    </div>
  </el-dialog>
  <!-- 新建活动内层弹窗 -->
  <el-dialog  title="基本信息" v-model="dialogVisible" style="padding:40px; font-weight: bold">
    <el-form style="margin:30px;">
      <el-form-item label="活动名称" style="width:300px;">
        <el-input  placeholder="请输入活动名称"
                   v-model="newStoreForm.activityName" >
        </el-input>
      </el-form-item>
      <el-form-item label="活动时间" style="width:300px;">
        <el-date-picker
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            v-model="timesDate"
        ></el-date-picker>
      </el-form-item>
      <el-form-item  label="活动说明"  style="width:300px;">
        <el-input type="textarea" v-model="newStoreForm.describes" ></el-input>
      </el-form-item>
    </el-form>
    <hr><h3>场景设计</h3>
    <el-form style="margin:30px;">
      <el-form-item label="活动目标"  style="width:300px;">
        <el-input placeholder="请输入活动目标" v-model="newStoreForm.activityTarget" ></el-input>
      </el-form-item>
      <el-form-item label="适用店铺" style="width:300px;">
        <el-select v-model="newStoreForm.shopIds" placeholder="请选择适用店铺">
          <el-option label="全部" value="0"></el-option>
          <el-option label="胖东来" value="1"></el-option>
          <el-option label="海底捞" value="2"></el-option>
          <el-option label="蜜雪冰城" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动人群" style="width:300px;">
        <el-select v-model="newStoreForm.targetCustomer" placeholder="请选择活动人群">
          <el-option label="全部" value="0"></el-option>
          <el-option label="甜品制作师" value="1"></el-option>
          <el-option label="美食博主" value="2"></el-option>
          <el-option label="音乐粉丝" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="自动化营销">
        <el-switch v-model="newStoreForm.marketingType"  :active-value="1"
                   :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="投放渠道">
        <el-radio-group v-model="newStoreForm.deliveryChannel">
          <el-radio  label="内容页面" value="1"></el-radio>
          <el-radio  label="定时推送" value="2"></el-radio>
          <el-radio  label="即时推送" value="3"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <hr><h3>奖励设置</h3>
    <el-form style="margin:30px;">
      <el-form-item label="奖励类型" >
        <el-radio-group v-model="newStoreForm.type">
          <el-radio  label="优惠卷" value="1"></el-radio>
          <el-radio  label="积分" value="2" disabled></el-radio>
          <el-radio  label="商品" value="3" disabled></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动奖励" style="width:300px;">
        <el-input type="text"  v-model="newStoreForm.activityReword" placeholder="请输入活动奖励"></el-input>
      </el-form-item>
    </el-form>
    <hr><h3>分享设置</h3>
    <el-form style="margin:30px;">
      <el-form-item label="文章摘要" style="width:300px;">
        <el-input type="textarea" v-model="newStoreForm.article" ></el-input>
      </el-form-item>
      <el-form-item label="短链接预览" style="width:300px;">
        <el-input  placeholder="http://"
                   prefix-icon="Link"
                   v-model="newStoreForm.shortLink" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="savePush">发布</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import { ElMessage} from "element-plus";
import axios from "axios";
// 内层
const dialogVisible = ref(false);

//点击 新建活动弹窗出现
const beforeAddActivity = () => {
  addActivityDialogVisible.value = true;
}

//定义重置搜索的方法
const resetSearch = () => {
  searchForm.value = {};
  loadActivity();
};
// 编辑操作
const handleEdit = (id) => {
  ElMessage.success('功能开发中！');
};
// 删除操作
const handleDelete = (id) => {
  if(confirm("您确定要删除吗？")) {
    axios.post(BASE_URL + '1010/admin/marketing/marketingActivity/info/delete/'+id).then((response) => {
      if (response.data.code == 0) {
        ElMessage.success("删除成功！");
        loadActivity();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
};



const tableData = ref([]);
//定义搜索条件的表单数据
const searchForm = ref({
  activityName: '', status: '',
  deliveryChannel: '', type: '',
  startDate:'',endDate:'',
  channelType: ''})
const times = ref([]);
//定义加载店铺列表的方法
const loadActivity = () => {
  let data=qs.stringify(searchForm.value);
  searchForm.value.pageSize = currentSize.value;
  searchForm.value.pageNo = currentPage.value;
  searchForm.value.startDate = times[0];
  searchForm.value.endDate = times[1];
  axios.get(BASE_URL+'1010/admin/marketing/marketingActivity/info/list?'+data).then((response)=>{
    if(response.data.code == 0){
      tableData.value = response.data.data.objects;
      total.value = response.data.data.total;
    }else{
      ElMessage.error(response.data.message);
    }
  })
}
onMounted(() => {
  loadActivity();
})
//定义数组用来保存新建活动内层弹窗的表单数据
const newStoreForm = ref({
  activityName:'',
  describes:'',
  activityTarget:'',
  activityJson:'',
  deliveryChannel:'',
  targetCustomer:'',
  type:'',
  shopIds:'',
  article:'',
  shareUrl:'',
  marketingType:'',
  activityReword:'',
});


//新建活动内层  店铺弹窗表单数据
const timesDate=ref([]);
//定义保存新建门店的方法
const savePush = () => {
  console.log(newStoreForm.value);
  newStoreForm.value.startDate=timesDate.value[0];
  newStoreForm.value.endDate=timesDate.value[1];
  let data = qs.stringify(newStoreForm.value);
  axios.post(BASE_URL+'1010/admin/marketing/marketingActivity/info/save',data).then((response)=>{
    if(response.data.code == 0){
      ElMessage.success('新建活动成功！');
      newStoreForm.value={};
      timesDate.value=[];
      dialogVisible.value=false;
      addActivityDialogVisible.value=false;
      loadActivity();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//定义修改店铺列表的启用状态的方法
const changeStatus = (id, status) => {
  axios.post(BASE_URL+'1010/admin/marketing/marketingActivity/info/update/'+id+'/'+status)
      .then((response)=>{
        if(response.data.code == 0){
          ElMessage.success('状态修改成功!');
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(5);
//定义变量保存数据总条目数
const total = ref();
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  loadActivity();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  loadActivity();
}


import { User, ShoppingBag, Watch, Money, Present } from '@element-plus/icons-vue';
// 外层
const addActivityDialogVisible=ref(false);
const selectedType = ref(''); // 选中的活动类型
const activityTypes = ref([
  { type: 'give', icon: User, text: '赠领' },
  { type: 'group', icon: ShoppingBag, text: '拼团' },
  { type: 'secKill', icon: Watch, text: '秒杀' },
  { type: 'cashback', icon: Money, text: '返现' },
  { type: 'lottery', icon: Present, text: '抽奖' },
]);

// 暴露给父组件的方法：打开弹窗
const openModal = () => {
  addActivityDialogVisible.value = true;
  selectedType.value = ''; // 重置选中状态
};

// 选择活动类型
const handleSelect = (type) => {
  selectedType.value = type;
};
// 新建活动按钮事件
const handleCreateActivity = () => {
  dialogVisible.value = true;
};
defineExpose({ openModal });





</script>
<style scoped>
.activity-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  margin-bottom: 30px;
}
.create-btn-container {
  text-align: center;
}
h3{
  font-size: 16px;
  font-weight: bold;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.activity-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 16px;
}
.activity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.activity-card.active {
  background-color: #409eff;
  color: #fff;
  border-color: #409eff;
}
.activity-icon {
  font-size: 24px;
  margin-bottom: 8px;
}
.activity-text {
  font-size: 14px;
}

</style>